---
title: SymmetryCurveEdgeRenderer 贝塞尔曲线边渲染器
icon: Spline
relatedFile: app/src/core/render/canvas2d/entityRenderer/edge/concrete/SymmetryCurveEdgeRenderer.tsx
---

这个服务用于渲染图中的边（edge），特别是那些基于贝塞尔曲线的边。它处理边的不同视觉状态，包括正常状态、拖动中的状态、自环状态以及虚拟边（在用户交互时临时显示的边）。此外，它还负责生成与边相关的视觉反馈效果，例如连接或断开时的动画。

基于 `EdgeRendererClass` 扩展，并依赖于 `Project` 实例来访问渲染工具和样式管理器。

## API

### 效果生成 API

#### `getCuttingEffects(edge: LineEdge): Effect[]`

生成当边被“切割”或移除时显示的视觉效果。

-   包含两个 `LineCuttingEffect`，分别从边的中点向起点和终点延伸。
-   包含一个 `CircleFlameEffect`，位于边的中点。

#### `getConnectedEffects(startNode: ConnectableEntity, toNode: ConnectableEntity): Effect[]`

生成当两个节点通过边连接时显示的视觉效果。

-   包含一个 `CircleFlameEffect`，位于起始节点的碰撞盒中心。
-   包含一个 `LineCuttingEffect`，从起始节点的碰撞盒中心延伸到目标节点的碰撞盒中心。

### 渲染 API

#### `renderNormalState(edge: LineEdge): void`

渲染边的正常状态。

-   基于边的起点、终点以及它们各自连接的节点的法线向量，计算并绘制一条 `SymmetryCurve`。
-   渲染曲线及其箭头。
-   渲染边上的文本。

#### `renderShiftingState(edge: LineEdge): void`

渲染边在拖动或调整中（shifting）的状态。

-   根据拖动中的中点（`shiftingMidPoint`）和源/目标节点的碰撞盒，动态计算并绘制一条 `SymmetryCurve`。
-   渲染曲线及其箭头。
-   渲染边上的文本。

#### `renderCycleState(edge: LineEdge): void`

渲染自环边（即边的起点和终点是同一个节点）。

-   绘制一个弧形来表示自环。
-   在弧形上绘制一个箭头。

#### `renderVirtualEdge(startNode: ConnectableEntity, mouseLocation: Vector): void`

渲染从一个起始节点到鼠标当前位置的临时“虚拟”边。

-   计算从起始节点到鼠标位置的 `SymmetryCurve`。
-   渲染虚拟曲线及其箭头。

#### `renderVirtualConfirmedEdge(startNode: ConnectableEntity, endNode: ConnectableEntity): void`

渲染两个已确认节点之间的临时“虚拟”边。

-   计算两个节点之间的 `SymmetryCurve`。
-   渲染虚拟曲线及其箭头。

### SVG 生成 API

#### `getNormalStageSvg(edge: LineEdge): React.ReactNode`

生成正常状态下边的 SVG 元素。

-   根据边是否有文本，生成不同的线体 SVG。
-   生成边上的文本 SVG。
-   生成箭头 SVG。

#### `getCycleStageSvg(): React.ReactNode`

生成自环边的 SVG 元素。目前返回空。

#### `getShiftingStageSvg(): React.ReactNode`

生成拖动中边的 SVG 元素。目前返回空。
